import React, { FC, useState } from 'react';
import { Radio } from 'choerodon-ui';
import { Input, Form } from 'antd';
import { history } from 'umi'
import classnames from 'classnames'
import themeIcon from './theme-configure.svg'

import templatesData from '../../_config/templates-config.json';
import blocksData from '../../_config/blocks-config.json';

import "./index.less"

import images from '../../_config/images';

const { Button: RadioButton, Group: RadioGroup } = Radio;

const listMap = {
  templates: templatesData,
  blocks: blocksData,
  all: templatesData.concat(blocksData)
}

const Home: FC = () => {
  const [filter, setFilter] = useState({
    type: 'all',
    category: '',
    select: '',
    blockSearch: '',
  });

  const [preview, setPreview] = useState({
    show: false,
    Component: 'div',
    type: 'block',
    closing: false,
  });
  const getContentTitle = () => {
    return '所选区块类别'
  }
  const getCateList = (): string[] => {
    const list = listMap[filter.type] as any[];
    const cates = list.map((v: any) => v.category)
    const uniqueList = [...new Set(cates)] as string[];
    return uniqueList.sort((a: string, b: string) => {
      return a.charAt(0).toLowerCase() > b.charAt(0).toLowerCase() ? 1 : -1
    })
  }

  const handleCategoryItemClick = (item: any) => {
    setFilter({ ...filter, select: filter.select === item ? '' : item })
  }

  const handlePreview = (block: any, isSmall?: boolean) => {
    if (isSmall) {
      setPreview({
        ...preview,
        show: true,
        Component: React.lazy(() => import(`../../../${block.type}/${block.block}/src/index`)) as any,
        type: block.type,
      });
    } else {
      history.push(`/${block.type}/${block.block}`)
    }
  }

  const handlePreviewClose = () => {
    setPreview({ ...preview, closing: true });
    setTimeout(() => {
      setPreview({ ...preview, closing: false, show: false, });
    }, 300);
  }
  const handlePreviewCode = (block: any) => {
    window.open(
      `https://gitee.com/hzero-cli/hzero-blocks/tree/master/${block.type}/${block.block}/src/index.tsx`,
      'blank'
    );
  }
  const blockList = (listMap[filter.type] as any[]).filter(item => !filter.select || item.category === filter.select).filter(b => b.block.toLowerCase().match(filter.blockSearch.toLowerCase()));
  return (
    <div className="home-page">
      <div className="home-page-header">
        <a>HZERO 物料中心</a>
        <a className="home-page-header-theme" onClick={() => history.push('/ued')}>
          <img src={themeIcon} alt=""/>
          <span>
            配置中心
          </span>
        </a>
      </div>
      <div className="home-page-content">
        <div className="home-page-content-sider">
          <div className="home-page-content-sider-top">
            <h4>选择类型</h4>
            <RadioGroup defaultValue="all" onChange={v => setFilter({ ...filter, type: v.target.value, select: '' })}>
              <RadioButton value="all">全部</RadioButton>
              <RadioButton value="templates">模板</RadioButton>
              <RadioButton value="blocks">区块</RadioButton>
            </RadioGroup>
          </div>
          {/* <div className="home-page-content-sider-search">
            <h4>搜索分类</h4>

          </div> */}
          <div className="home-page-content-sider-content">
            <h4>所有分类</h4>
            <ul>
              {
                getCateList().map((item: string) => {
                  return (
                    <li className={filter.select === item ? 'label-selected' : ''} onClick={() => handleCategoryItemClick(item)} key={item}>{item}</li>
                  )
                })
              }
            </ul>
          </div>
        </div>
        <div className="home-page-content-content">
          <header className="home-page-content-content-header">
            <span>
              {getContentTitle()}
            </span>
            <Form.Item label="搜索">
              <Input.Search onChange={(e) => setFilter({...filter, blockSearch: e.target.value})} onSearch={(v) => setFilter({...filter, blockSearch: v})}></Input.Search>
            </Form.Item>
          </header>
          <ul className="home-page-content-content-list">
            {
              blockList.map(block => {
                return (
                  <li key={block.block} /*onClick={() => handleBlockClick(block)} */>
                    <div className="list-item-img-wrapper">
                      <img src={images[block.img]} />
                      <div className="list-item-preview-mask">
                        <span onClick={() => handlePreview(block, true)}>小窗预览</span>
                        <span onClick={() => handlePreview(block)}>单独预览</span>
                        <span onClick={() => handlePreviewCode(block)}>查看源码</span>
                      </div>
                    </div>
                    <p>{block.block}</p>
                  </li>
                )
              })
            }
          </ul>
          {/* <Pagination></Pagination> */}
        </div>
      </div>
      <div className={classnames('home-page-preview', preview.show && 'home-page-preview-show', preview.closing && 'home-page-preview-closing')}>
        <div className="home-page-preview-mask" onClick={handlePreviewClose} />
        <div className="home-page-preview-content">
          <div className="home-page-preview-content-actions">
            <span className="home-page-preview-content-actions-close" onClick={handlePreviewClose}></span>
          </div>
          <div className={classnames("home-page-preview-content-wrapper", preview.type === 'templates' ? "preview-type-templates" : 'preview-type-block')} >
            <React.Suspense fallback="..." >
              <preview.Component />
            </React.Suspense>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Home;